<template>
	<view class="add-shore">
		<!-- 顶部导航 -->
		<view>
			<u-navbar
				:is-back="true"
				:border-bottom="false"
				:title-bold="true"
				:title="i18n.Title"
				:background="background"
				title-color="#222222"
				back-icon-color="#222222">
			</u-navbar>
		</view>
		<!-- 商品类型 -->
		<view class="goods-type">
			<goods-type></goods-type>
		</view>
		<scroll-view scroll-y="true" style="flex: 1; min-height: 0rpx;">
			<!-- 供应商 -->
			<view class="goods-head" v-for="(item,index) in goodslist" :key="item.mer_id">
				<view class="body-head">
					<!-- 头像 -->
					<view class="store-head">
						<image :src="item.mer_avatar" mode=""></image>
						<span>{{item.mer_name}}</span>
					</view>
					<view @click="gosupplier(item.mer_id)">
						<view class="sum-goods">
							{{i18n.Gong}}{{item.totalProduct}}{{i18n.Jian}}
							<u-icon style="margin-left:10rpx;" color="#bdbdbd" name="arrow-right"></u-icon>
						</view>
					</view>
				</view>
				<view class="goods-show">
					<view class="img-box" v-for="img in item.showProduct" :key="img.product_id" @click="godetail(img.product_id)">
						<image :src="img.image"></image>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>
<script>
import { merchantlist,open_state} from '@/api/store.js';
import goodsType from "@/components/selectGoodstype/index.vue"
	const globalData = getApp().globalData;
export default {
	components:{
		goodsType
	},
	computed: {
	   i18n() {
	    return globalData.$t('supplier');
	   },
	  },
	data() {
		return {
			isrelativetop:false,
			background: {
				backgroundColor: '#ffffff',
			},
			goodslist:[],//商品列表
		};
	},
	methods: {
		viewstatus:function(){//查看开店状态
			let that =this
			open_state().then(res=>{
				if(res.status==200){
					switch(res.data.open_state){
						case 0:
							uni.redirectTo({
							    url: '/pages/store/privatestop/index'
							});
						break;
						case 1:
							uni.redirectTo({
							    url: '/pages/store/privatestop/index'
							});
						break;
						case 3:
							uni.redirectTo({
							    url: '/pages/store/store_type/index'
							});
						break;
					}
				}
			}).catch(err=>{
				return that.$util.Tips({
					title: err
				});
			})
		},
		gosupplier:function(id){
			uni.navigateTo({
				url: `/pages/store/supplier_home/index?supplierid=${id}`
			});
		},
		godetail:function(id){
			uni.navigateTo({
				url: `/pages/store/goods_detail/index?goodsid=${id}`
			});
		},
		getsupplier:function(){//获得商品列表
			let that = this
			merchantlist().then(data=>{
				if(data.status==200){
					that.goodslist=data.data.list
					console.log(data.data.list)
				}
			})
		}
	},
	onReady(){
	},
	onShow(){
		this.viewstatus();
		this.getsupplier();
	}
};
</script>

<style lang="scss" scoped>
.add-shore{
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.goods-type{
	background-color: #FFFFFF !important;
}
.goods-head{
	margin: 30rpx 17rpx 12rpx;
	padding: 27rpx;
	height: 290rpx;
	border-radius: 20rpx;
	background: #FFFFFF;
	.body-head{
		display: flex;
		justify-content: space-between;
		align-items: center;
		.store-head{
			display: flex;
			align-items: center;
			image{
				width: 72rpx;
				height: 72rpx;
				border-radius: 50%;
			}
			span{
				margin-left: 20rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #222222;
			}
		}
		.sum-goods{
			font-size: 26rpx;
			font-weight: 400;
			color: #999999;
			image{
				margin-left: 10rpx;
				width: 24rpx;
				height: 24rpx;
			}
		}
	}
	.goods-show{
		padding:24rpx 0 0 95rpx;
		display: flex;
		flex-wrap: nowrap;
		.img-box{
			margin-right: 16rpx;
			width: 130rpx;
			height: 130rpx;
			padding: 5rpx;
			background: #FFFFFF;
			border: 1px solid #EAEAEA;
			border-radius: 8rpx;
		}
		image{
			width: 112rpx;
			height: 118rpx;
		}
	
	}
}
</style>
